<template>
  <div>
    <el-container>
      <el-main>
        <img
          style="width: 190px; height: 130px; float: left"
          src="../../assets/logo.png"
          alt=""
        />
         
        <div style="margin-top: 5px">
          <el-input
            placeholder="请输入搜索内容"
            class="input-with-select"
            style="width: 50%; margin-right: 185px; margin-top: 20px"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              style="background-color: red; color: white"
              border-color:red
              >搜索</el-button >
          </el-input>
        </div>
       <!--  <div class="zhonglei">
          <span style="user-select: none">分类：</span>
          <el-link type="info">上衣</el-link>
          &nbsp;
          <el-link type="info">下衣</el-link>
          &nbsp;
          <el-link type="info">鞋类</el-link>
        </div>-->
        <div class="demo-input-suffix">
          <span style="user-select: none">价格区间：</span>
          <el-input style="width: 30%" placeholder="请选择最低价"> </el-input>
          <span>—</span>
          <el-input style="width: 30%" placeholder="请选择最高价"> </el-input>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style scoped>
.el-container {
  text-align: center;
}
.el-header {
  color: white;
  text-decoration: none;
  font-size: 50px;
}
.el-main {
  background-color: antiquewhite;
  width: 75%;
  margin: 0 auto;
}
.demo-input-suffix {
  /* border: rgb(216, 216, 216) solid 2px; */
  margin: 0 auto;
  margin-top: 10px;
  margin-right: 335px;
  text-align: left;
  padding: 2px;
  width: 50%;
}
.zhonglei {
  /* border: rgb(216, 216, 216) solid 2px; */
  width: 30%;
  margin-left: 345px;
  text-align: left;
  padding: 5px;
  margin-top: 10px;
}
</style>